<template>
  <div class="ad_form" :style="'background:'+ attr.background">
    <el-form ref="ruleForm" class="form_group" label-position="top" label-width="80px" :model="formLabelAlign">
      <el-form-item
        v-for="(item, index) in attr.formList"
        :key="index"
        style="color: red"
        :label="item.title"
        :prop="item.prop"
        :rules="item.rules"
      >
        <el-input v-model="item.value" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="">
        <el-checkbox v-model="checked">自动输入历史手机号码<span style="color: #3B9AFF;">《个人信息授权与保护声明》</span></el-checkbox>
      </el-form-item>
      <el-form-item class="textCenter">
        <el-button
          :style="'background:' + attr.button_background +
            ';border-color:' + attr.button_border_background +
            ';border-width:' + attr.button_border_width + 'px' +
            ';font-size:' + attr.font_size_button + 'px'+
            ';color:' + attr.color_button +
            ';font-weight:' + attr.font_weight_button +
            ';letter-spacing:' + attr.letter_spacing_button + 'px' +
            ';width:' + attr.button_width + '%' +
            ';border-radius:' + attr.button_border_radius + 'px' +
            ';height:' + attr.button_height + 'px'"
          type="primary"
          @click="submitForm('ruleForm')"
        >{{attr.button_text}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, Input, Button, FormItem, Checkbox } from 'element-ui'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)
Vue.use(Checkbox)

export default {
  name: 'FormGroup',
  props: {
    typeStyle: {
      type: String,
      default: 'img'
    },
    attr: {
      type: Object,
      default: Object
    }
  },
  data() {
    return {
      formLabelAlign: {},
      checked: false
    }
  },
  watch: {
    attr: {
      handler(old, newOld) {
        this.$refs['ruleForm'].resetFields()
      },
      deep: true
    }
  },
  mounted() {
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .ad_form {
    background: white;
    .form_group {
      padding: 10px 20px;
      .el-form-item {
        margin-bottom: 6px !important;
        label {
          padding: 0 0 0 !important;
        }
          .el-checkbox__label {
            font-size: 12px !important;
          }
        }
      .el-input__inner {
        border-radius: 0px;
      }
      .el-button {
        width: 100%;
        border-radius: 0px;
        margin-top: 20px;
      }
    }
  }
</style>
